<%@ page import="com.wuda.bean.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/layui/layui.all.js"></script>
    <style>
        .profile-container {
            width: 50%;
            margin: 50px auto;
            padding: 20px;
            background: #f2f2f2;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .profile-container .profile-item {
            margin-bottom: 20px;
        }

        .profile-container .profile-item label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }

        .profile-container .profile-item span {
            margin-left: 10px;
        }

        .profile-container .profile-item .layui-btn {
            margin-left: 20px;
        }

        .profile-container .actions {
            text-align: center;
        }
    </style>
</head>
<body>
<%
    User user = (User) session.getAttribute("user");
    if (user == null) {
        response.sendRedirect(request.getContextPath() + "/index.jsp");
        return;
    }
%>
<div class="profile-container layui-form">
    <div class="profile-item">
        <label>用户名:</label>
        <span id="username"><%= user.getUsername() %></span>
        <button class="layui-btn layui-btn-sm" onclick="openEditUsername()">修改姓名</button>
    </div>
    <div class="profile-item">
        <label>邮箱:</label>
        <span id="email"><%= user.getEmail() %></span>
    </div>
    <div class="profile-item">
        <label>身份:</label>
        <span id="role"><%= user.getRole() %></span>
    </div>
    <div class="actions">
        <button class="layui-btn layui-btn-normal" onclick="openEditPassword()">修改密码</button>
    </div>
</div>

<script>

    /**
     * 打开修改姓名弹窗
     */
    function openEditUsername() {
        // {"userId":1,"username":"wule","email":"2038195485@qq.com"}
        let user = JSON.parse(sessionStorage.getItem('user'));

        layui.layer.prompt({
            formType: 0,
            value: user.username,
            title: '修改姓名'
        }, function (value, index) {
            $.ajax({
                type: 'POST',
                url: '/user/updateUsername',
                data: {
                    userId: user.userId,
                    newUsername: value
                },
                success: function (response) {
                    if (response.code === 200) {
                        layui.layer.msg('姓名修改成功', {icon: 1});
                        user.username = value;
                        sessionStorage.setItem('user', JSON.stringify(user));
                        $('#username').text(value);
                        layui.layer.close(index);
                    } else {
                        layui.layer.msg(response.msg, {icon: 2});
                    }
                }
            });
        });
    }

    /**
     * 打开修改密码弹窗
     */
    function openEditPassword() {
        let user = JSON.parse(sessionStorage.getItem('user'));
        layui.layer.open({
            type: 1,
            title: '修改密码',
            content: '<div style="padding: 20px;">' +
                '<form class="layui-form" id="passwordForm">' +
                '<div class="layui-form-item">' +
                '<label class="layui-form-label">旧密码</label>' +
                '<div class="layui-input-block">' +
                '<input type="password" name="oldPassword" required lay-verify="required" placeholder="请输入旧密码" autocomplete="off" class="layui-input">' +
                '</div>' +
                '</div>' +
                '<div class="layui-form-item">' +
                '<label class="layui-form-label">新密码</label>' +
                '<div class="layui-input-block">' +
                '<input type="password" name="newPassword" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">' +
                '</div>' +
                '</div>' +
                '<div class="layui-form-item">' +
                '<label class="layui-form-label">确认密码</label>' +
                '<div class="layui-input-block">' +
                '<input type="password" name="confirmPassword" required lay-verify="required" placeholder="请确认新密码" autocomplete="off" class="layui-input">' +
                '</div>' +
                '</div>' +
                '<div class="layui-form-item">' +
                '<div class="layui-input-block">' +
                '<button type="button" class="layui-btn" lay-submit lay-filter="savePassword">提交</button>' +
                '</div>' +
                '</div>' +
                '</form>' +
                '</div>',
            success: function (layero, index) {
                layui.form.on('submit(savePassword)', function (data) {
                    const oldPassword = data.field.oldPassword;
                    const newPassword = data.field.newPassword;
                    const confirmPassword = data.field.confirmPassword;

                    if (newPassword !== confirmPassword) {
                        layui.layer.msg('新密码和确认密码不一致', {icon: 2});
                        return false;
                    }

                    $.ajax({
                        type: 'POST',
                        url: '/user/updatePassword',
                        data: {
                            userId: user.userId,
                            oldPassword: oldPassword,
                            newPassword: newPassword
                        },
                        success: function (response) {
                            if (response.code === 200) {
                                layui.layer.msg('密码修改成功', {icon: 1});
                                layui.layer.close(index);
                            } else {
                                layui.layer.msg(response.msg, {icon: 2});
                            }
                        }
                    });
                    return false;
                });
            }
        });
    }

</script>


</body>
</html>
